<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>基础用法</title>
  <link rel="stylesheet" href="">
  <script type="text/javascript" src="../../js/vue.js"></script>
</head>

<body>
 <h1><a href="index.html">基础用法</a>|<a href="value.html">绑定Value</a></h1>
   <hr>
   <h2>文本</h2>
  <form action="#" method="get" id="form" accept-charset="utf-8">
    <input type="text" v-model="message" placeholder="edit me" />
    <p>Message is:{{message}}</p>
  </form>
  <br>
  <hr>
  <h1>多行文本</h1>
  <form id="form_1">
    <h6>请输入文本：</h6>
    <p style="white-space: pre">{{message}}</p>
    <br>
    <hr>
    <textarea v-model="message" placeholder="请输入文本"></textarea>
  </form>
  <br>
  <hr>
  <h1>复选框</h1>
  <form id="form_2">
    <input type="checkbox" id="checkbox" v-model="checkbox" >
    <label for="checkbox">{{checkbox}}</label>
  </form>
  <br>
  <hr>
  <h1>多个勾选框，绑定到同一个数组</h1>
  <form id="form_3">
    <input type="checkbox" id="Mary" value="Mary" v-model="checkedNames">
    <label for="Mary">Mary</label>
    <input type="checkbox" id="Lili" value="Lili" v-model="checkedNames">
    <label for="Lili">Lili</label>
    <input type="checkbox" id="Luxi" value="Luxi" v-model="checkedNames">
    <label for="Luxi">Luxi</label>
    <br>
    <span>Checked names: {{ checkedNames }}</span>
  </form>
  <br>
  <hr>
  <h1>单选按钮</h1>
  <form id="form_4">
    <input type="radio" id="one" value="One" v-model="picked">
    <label for="one">One</label>
    <input type="radio" id="two" value="Two" v-model="picked">
    <label for="two">Two</label>
    <br>
    <span>当前选中的是：{{picked}}</span>
    
  </form>
  <br>
  <hr>
  <h1>单选列表</h1>
  <form  id="form_5">
    <select v-model="select">
      <option value="A">A</option>
      <option value="B">B</option>
      <option value="C">C</option>
      <option value="D">D</option>
      <option value="E">E</option>
      <option value="F">F</option>
    </select>
    <span>当前选中的是：{{select}}</span>
  </form>
  <br>
  <hr>
   <h1>多选列表</h1>
  <form  id="form_6" >
    <select v-model="select" multiple>
      <option value="A">A</option>
      <option value="B">B</option>
      <option value="C">C</option>
      <option value="D">D</option>
      <option value="E">E</option>
      <option value="F">F</option>
    </select>
    <span>当前选中的是：{{select}}</span>
  </form>
  <br>
  <hr>
  <h1>动态选项，用 v-for 渲染</h1>
  <form  id="form_7">
    <select v-model="selected">
      
      <option v-for="option in options" v-bind:value="option.value"> {{ option.text }} </option>
    </select>
      <span>当前选中的是：{{selected}}</span>
  </form>
  <script type="text/javascript">
  // 基础用法
  var form = new Vue({
    el: "#form",
    data: {
      message: "Hello World!"
    }
  });

  // 多行文本
  var form_1 = new Vue({
    el: "#form_1",
    data: {
      message: "Hello World!"
    }
  });
  // 复选框
  var form_2 = new Vue({
    el: "#form_2",
    data: {
      checkbox:false
    }
  });
  // 多个勾选框，绑定到同一个数组
  var form_3 = new Vue({
    el: "#form_3",
    data: {
      checkedNames: []
    }
  });
  // 单选按钮
  var form_4 = new Vue({
    el:"#form_4",
    data:{
      picked:"One"
    }
  });
  // 单选列表:
  var form_5 = new Vue({
    el:"#form_5",
    data:{
      select:'B'
    }
  });
   // 多选列表:
  var form_6 = new Vue({
    el:"#form_6",
    data:{
      select:[]
    }
  });
  // 动态选项，用 v-for 渲染
  var form_7 = new Vue({
    el:"#form_7",
    data:{
      selected:"A",
      options:[
      {text:"One",value:"A"},
      {text:"Two",value:"B"},
      {text:"Three",value:"C"},
      {text:"Four",value:"D"},
      {text:"Five",value:"E"}
      ]
    }
  });
  </script>
</body>

</html>
